<template>
  <div>
    <div class="demo-content align-center morphing-demo">
      <svg width="140" height="140" viewBox="0 0 140 140">
        <g fill="none" fill-rule="evenodd">
          <g fill="currentColor" fill-opacity="0.15" transform="translate(0 6)">
            <polygon points="70 0 136.574 48.369 111.145 126.631 28.855 126.631 3.426 48.369" />
            <polygon points="70 18 119.455 53.931 100.565 112.069 39.435 112.069 20.545 53.931" />
            <polygon points="70 34.86 101.727 57.911 89.609 95.209 50.391 95.209 38.273 57.911" />
            <polygon points="70 50.898 84.864 61.697 79.186 79.171 60.814 79.171 55.136 61.697" />
          </g>
          <polygon
            class="polymorph"
            stroke-width="1"
            stroke="currentColor"
            points="70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369 "
          />
        </g>
      </svg>
    </div>

    <div class="demo-content align-center line-drawing-demo">
      <svg viewBox="0 0 280 100">
        <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1" class="lines">
          <path
            class="el"
            d="M58 80V50.12C57.7 41.6 51.14 35 43 35a15 15 0 0 0 0 30h7.5v15H43a30 30 0 1 1 0-60c16.42 0 29.5 13.23 30 29.89V80H58z"
            style="stroke-dashoffset: 0px;"
            stroke-dasharray="316.85528564453125"
          />
          <path
            class="el"
            d="M73 80V20H58v60h15z"
            style="stroke-dashoffset: 7.42778px;"
            stroke-dasharray="150"
          />
          <path
            class="el"
            d="M58 80V49.77C58.5 33.23 71.58 20 88 20a30 30 0 0 1 30 30v30h-15V50a15 15 0 0 0-15-15c-8.14 0-14.7 6.6-15 15.12V80H58zm75 0V20h-15v60h15z"
            style="stroke-dashoffset: 89.8693px;"
            stroke-dasharray="441.1739501953125"
          />
          <path
            class="el"
            d="M118 80V49.77C118.5 33.23 131.58 20 148 20a30 30 0 0 1 30 30v30h-15V50a15 15 0 0 0-15-15c-8.14 0-14.7 6.6-15 15.12V80h-15zm-7.5-60a7.5 7.5 0 1 1-7.48 8v-1c.25-3.9 3.5-7 7.48-7z"
            style="stroke-dashoffset: 155.205px;"
            stroke-dasharray="338.3053894042969"
          />
          <path
            class="el"
            d="M133 65a15 15 0 0 1-15-15v-7.5h-15V50a30 30 0 0 0 30 30V65zm30 15V49.77C163.5 33.23 176.58 20 193 20a30 30 0 0 1 30 30v30h-15V50a15 15 0 0 0-15-15c-8.14 0-14.7 6.6-15 15.12V80h-15z"
            style="stroke-dashoffset: 297.781px;"
            stroke-dasharray="406.8699035644531"
          />
          <path
            class="el"
            d="M238 65a15 15 0 0 1 0-30c8.1 0 14.63 6.53 15 15h-15v15h30V49.89C267.5 33.23 254.42 20 238 20a30 30 0 0 0 0 60V65z"
            style="stroke-dashoffset: 277.358px;"
            stroke-dasharray="301.8561706542969"
          />
          <path
            class="el"
            d="M260.48 65a7.5 7.5 0 1 1-7.48 8v-1c.26-3.9 3.5-7 7.48-7z"
            style="stroke-dashoffset: 46.9765px;"
            stroke-dasharray="47.128875732421875"
          />
        </g>
      </svg>
    </div>


   <!-- 函数返回值动画 -->
    <div class="demo-content function-based-values-demo">
    <div class="line">
      <div class="small circle shadow"></div>
      <div data-x="170" class="small circle el" ></div>
    </div>
    <div class="line">
      <div class="small circle shadow"></div>
      <div data-x="80" class="small circle el" ></div>
    </div>
    <div class="line">
      <div class="small circle shadow"></div>
      <div data-x="270" class="small circle el" ></div>
    </div>
  </div>

  </div>
</template>

<script>
import { translate, translateline } from "util/animate.js";

export default {
  mounted() {
    translate(".morphing-demo .polymorph");
    translateline(".line-drawing-demo .lines path");

    // var path = anime.path(".motion-path-demo path");

    // anime({
    //   targets: ".motion-path-demo .el",
    //   translateX: path("x"),
    //   translateY: path("y"),
    //   rotate: path("angle"),
    //   easing: "linear",
    //   duration: 2000,
    //   loop: true
    // });
  }
};
</script>


<style>
</style>